<template>
  <div>
    <!-- <el-button v-if="iparent.parent.readOnly !== true && (iparent.itemStatus === 2 || iparent.itemStatus === -4 || iparent.itemStatus === -10 || iparent.itemStatus === -6 || iparent.itemStatus === -11)" size="mini" type="primary" style="float:right;margin-bottom:5px;" round @click="doAddPrice">新增行</el-button> -->
    <el-button v-if="buttonShow" size="mini" type="primary" style="float: right; margin-bottom: 5px" round @click="doAddPrice">新增行</el-button>
    <el-table :data="priceOBFormInfo" size="small" border style="width: 100%">
      <el-table-column type="index" align="center" fixed width="55" label="序号" />
      <el-table-column v-if="createFlag === true" fixed label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click.native.prevent="deleteRow(scope.$index)">移除该项</el-button>
        </template>
      </el-table-column>
      <el-table-column label="Vendor#" prop="vendorNbr">
        <template slot-scope="scope">
          <el-input v-model="scope.row.vendorNbr" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="VSK#" prop="vendorStockId">
        <template slot-scope="scope">
          <el-input v-model="scope.row.vendorStockId" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="Chinese Desc" prop="item1Desc">
        <template slot-scope="scope">
          <el-input v-model="scope.row.item1Desc" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="UPC" prop="upcNbr">
        <template slot-scope="scope">
          <el-input v-model="scope.row.upcNbr" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="CRTL Trait#" prop="crtlTraitNbr">
        <template slot-scope="scope">
          <el-input v-model="scope.row.crtlTraitNbr" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="Retail Type" prop="retailType">
        <template slot-scope="scope">
          <el-input v-model="scope.row.retailType" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="New Cost" prop="newCost">
        <template slot-scope="scope">
          <el-input v-model="scope.row.newCost" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column> -->
      <el-table-column label="Retail(W/VAT)" prop="retail">
        <template slot-scope="scope">
          <el-input v-model="scope.row.retail" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="MU%" prop="mu">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mu" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="Effective Date" prop="effectiveDate" width="160">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.effectiveDate" type="date" format="MM/dd/yyyy" placeholder="选择日期" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="Cancel Date" prop="cancelDate" width="160">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.cancelDate" type="date" format="MM/dd/yyyy" placeholder="选择日期" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="TraitNbr" prop="traitNbr" width="100">
        <template slot-scope="{ row }">
          <el-input v-model="row.traitNbr" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="SendOmit Code" prop="sendOmitCode" width="120">
        <template slot-scope="{ row }">
          <el-input v-model="row.sendOmitCode" class="filter-item" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'

export default {
  name: 'PriceOB',
  props: {
    iparent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      priceOBFormInfo: [],
      editFlag: false,
      createFlag: false
    }
  },
  computed: {
    buttonShow() {
      const itemStatus = [2, -4, -6, -10, -11]
      return this.iparent.parent.readOnly !== true && itemStatus.includes(this.iparent.itemStatus)
    }
  },
  mounted() {
    bus.$on('changeData', this.setData)
  },
  methods: {
    doAddPrice() {
      var priceObInfo = {}
      priceObInfo.itemNbr = this.iparent.itemInfo.itemNbr
      priceObInfo.vendorNbr = this.iparent.itemInfo.vendorNbr
      priceObInfo.vendorStockId = this.iparent.itemInfo.vendorStockId
      priceObInfo.item1Desc = this.iparent.itemInfo.item1Desc
      priceObInfo.upcNbr = this.iparent.itemInfo.upcNbr
      priceObInfo.traitNbr = this.iparent.itemInfo.traitNbr
      priceObInfo.sendOmitCode = this.iparent.itemInfo.sendOmitCode
      priceObInfo.effectiveDate = new Date()
      priceObInfo.cancelDate = '12/31/2049'
      this.priceOBFormInfo.push(priceObInfo)
      // this.editFlag = true
      this.createFlag = true
    },
    // 删除一行
    deleteRow(index) {
      this.priceOBFormInfo.splice(index, 1)
    },
    setData() {
      this.priceOBFormInfo.forEach((e) => {
        e.traitNbr = this.iparent.itemInfo.traitNbr
        e.sendOmitCode = this.iparent.itemInfo.sendOmitCode
      })
    }
  }
}
</script>
